$(function(){
    // 点击左侧菜单组标题时展开菜单
    $(".side-menu-title").click(function(){
        var that = $(this).find(".side-menu-icon-right");
        var isActive = that.hasClass("glyphicon-triangle-right");
        if(isActive){
            $(".side-menu-child-item").slideUp();
            $(this).next().slideDown();
            $(".side-menu-icon-right").removeClass("glyphicon-triangle-bottom").addClass("glyphicon-triangle-right");
            that.removeClass("glyphicon-triangle-right").addClass("glyphicon-triangle-bottom");
        }else{
            that.removeClass("glyphicon-triangle-bottom").addClass("glyphicon-triangle-right");
            $(this).next().slideUp();
        }
    });
    // 点击菜单时右侧打开页面
    $(".side-menu-child-item-li").click(function(){
        var title = $(this).text();
        var href = $(this).attr("data-href");
        var tab = `<li class="tab-box-item tab-box-item-select" data-href="`+href+`">
                    <span class="html-title">`+title+`</span>
                    <span class="html-close iconfont icon-guanbi"></span>
                </li>`;
        var iframe = `<div class="html-box"  data-href="`+href+`">
                        <iframe src="`+href+`"></iframe>
                      </div>`;
        var boxWidth = $(".tab-box ul").width();
        var length = $(".tab-box ul li").length;
        $('.side-menu-child-item-li-select').removeClass('side-menu-child-item-li-select');
        $(this).addClass('side-menu-child-item-li-select');
        if($(".tab-box ul li[data-href='"+href+"']").length > 0){
            $(".tab-box-item-select").removeClass('tab-box-item-select');
            $(".tab-box ul li[data-href='"+href+"']").addClass('tab-box-item-select');
            $(".html-box").css("display", "none");
            $(".html-box iframe[src='"+href+"']").parent().css("display", "block");
        }else{
            $(".tab-box-item-select").removeClass('tab-box-item-select');
            $(".tab-box ul li:last").after(tab);
            $(".html-box").css("display", "none");
            $(".view-box").append(iframe);
        }
        if(boxWidth < (110 * length + 110)){
            let href = $(".tab-box ul li:first").next().attr("data-href");
            $(".html-box iframe[src='"+href+"']").parent().remove();
            $(".tab-box ul li:first").next().remove();
        }
    });
    // 点击右侧tab菜单时显示对应页面
    $(".tab-box ul").on("click", "li", function(){
        var href = $(this).attr("data-href");
        $(".tab-box-item-select").removeClass('tab-box-item-select');
        $(this).addClass('tab-box-item-select');
        $(".html-box").css("display", "none");
        $(".html-box iframe[src='"+href+"']").parent().css("display", "block")
        $('.side-menu-child-item-li-select').removeClass('side-menu-child-item-li-select');
        $(".side-menu-child-item li[data-href='"+href+"']").addClass('side-menu-child-item-li-select');
        if($(".side-menu-child-item li[data-href='"+href+"']").parent().prev().find(".side-menu-icon-right").hasClass("glyphicon-triangle-right")){
            $(".side-menu-child-item").slideUp();
            $(".side-menu-child-item li[data-href='"+href+"']").parent().slideDown();
            $(".side-menu-icon-right").removeClass("glyphicon-triangle-bottom").addClass("glyphicon-triangle-right");
            $(".side-menu-child-item li[data-href='"+href+"']").parent().prev().find(".side-menu-icon-right").removeClass("glyphicon-triangle-right").addClass("glyphicon-triangle-bottom");
        }
    });
    // 点击tab菜单的关闭按钮时关闭页面
    $("body").delegate(".html-close", "click", function(){
        var href = $(this).parent().attr("data-href");
        $(this).parent().prev().addClass('tab-box-item-select');
        $(".html-box iframe[src='"+$(this).parent().prev().attr("data-href")+"']").parent().css("display", "block");
        $('.side-menu-child-item-li-select').removeClass('side-menu-child-item-li-select');
        $(".side-menu-child-item li[data-href='"+$(this).parent().prev().attr("data-href")+"']").addClass('side-menu-child-item-li-select');
        if($(".side-menu-child-item li[data-href='"+$(this).parent().prev().attr("data-href")+"']").parent().prev().find(".side-menu-icon-right").hasClass("glyphicon-triangle-right")){
            $(".side-menu-child-item").slideUp();
            $(".side-menu-child-item li[data-href='"+$(this).parent().prev().attr("data-href")+"']").parent().slideDown();
            $(".side-menu-icon-right").removeClass("glyphicon-triangle-bottom").addClass("glyphicon-triangle-right");
            $(".side-menu-child-item li[data-href='"+$(this).parent().prev().attr("data-href")+"']").parent().prev().find(".side-menu-icon-right").removeClass("glyphicon-triangle-right").addClass("glyphicon-triangle-bottom");
        }
        $(".html-box iframe[src='"+href+"']").parent().remove();
        $(this).parent().remove();
    });

})